--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit ef9f8adeb3f70e966f5328bfbcc7a8d85b806caa
Parents : 96725c8
Author : Sudo-Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-01-01T17:35:28-06:00
feat(conversation): add location sharing and request functionality with telemetry support in ConversationViewer
Changes
1 files changed, 132 insertions(+), 9 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/messages/ConversationViewer.vue b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
index eb5bcf63..2d8e45aa 100644
--- a/meshchatx/src/frontend/components/messages/ConversationViewer.vue
+++ b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
@@ -349,6 +349,31 @@
</div>
</a>
</div>
+
+ <!-- telemetry / location field -->
+ <div v-if="chatItem.lxmf_message.fields?.telemetry?.location" class="pb-1 mt-1">
+ <button
+ type="button"
+ class="flex items-center gap-2 border border-gray-200/60 dark:border-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-800 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+ :class="
+ chatItem.is_outbound
+ ? 'bg-white/20 text-white border-white/20 hover:bg-white/30'
+ : 'bg-gray-50 dark:bg-zinc-800/50 text-gray-700 dark:text-zinc-300'
+ "
+ @click="viewLocationOnMap(chatItem.lxmf_message.fields.telemetry.location)"
+ >
+ <MaterialDesignIcon icon-name="map-marker" class="size-5" />
+ <div class="text-left">
+ <div class="font-bold text-xs uppercase tracking-wider opacity-80">
+ Location
+ </div>
+ <div class="text-[10px] font-mono opacity-70">
+ {{ chatItem.lxmf_message.fields.telemetry.location.latitude.toFixed(6) }},
+ {{ chatItem.lxmf_message.fields.telemetry.location.longitude.toFixed(6) }}
+ </div>
+ </div>
+ </button>
+ </div>
</div>
<!-- actions -->
@@ -679,6 +704,24 @@
>
<span>{{ $t("messages.recording", { duration: audioAttachmentRecordingDuration }) }}</span>
</AddAudioButton>
+ <button
+ type="button"
+ class="attachment-action-button"
+ :title="$t('messages.share_location')"
+ @click="shareLocation"
+ >
+ <MaterialDesignIcon icon-name="map-marker" class="w-4 h-4" />
+ <span>{{ $t("messages.location") }}</span>
+ </button>
+ <button
+ type="button"
+ class="attachment-action-button"
+ :title="$t('messages.request_location')"
+ @click="requestLocation"
+ >
+ <MaterialDesignIcon icon-name="crosshairs-question" class="w-4 h-4" />
+ <span>{{ $t("messages.request") }}</span>
+ </button>
<div class="ml-auto my-auto">
<SendMessageButton
:is-sending-message="isSendingMessage"
@@ -792,6 +835,7 @@ import ConversationDropDownMenu from "./ConversationDropDownMenu.vue";
import AddImageButton from "./AddImageButton.vue";
import IconButton from "../IconButton.vue";
import GlobalEmitter from "../../js/GlobalEmitter";
+import ToastUtils from "../../js/ToastUtils";
export default {
name: "ConversationViewer",
@@ -835,6 +879,7 @@ export default {
newMessageImage: null,
newMessageImageUrl: null,
newMessageAudio: null,
+ newMessageTelemetry: null,
newMessageFiles: [],
isSendingMessage: false,
autoScrollOnNewMessage: true,
@@ -1123,19 +1168,21 @@ export default {
GlobalEmitter.emit("compose-new-message", destinationHash);
},
onLxmfMessageReceived(lxmfMessage) {
+ // only add if it's for the current conversation
+ if (lxmfMessage.source_hash !== this.selectedPeer?.destination_hash) {
+ return;
+ }
+
// add inbound message to ui
this.chatItems.push({
type: "lxmf_message",
lxmf_message: lxmfMessage,
});
- // if inbound message is for a conversation we are currently looking at, mark it as read
- if (lxmfMessage.source_hash === this.selectedPeer?.destination_hash) {
- // find conversation
- const conversation = this.findConversation(this.selectedPeer.destination_hash);
- if (conversation) {
- this.markConversationAsRead(conversation);
- }
+ // mark conversation as read
+ const conversation = this.findConversation(this.selectedPeer.destination_hash);
+ if (conversation) {
+ this.markConversationAsRead(conversation);
}
// show notification for new messages if window is not focussed
@@ -1149,8 +1196,12 @@ export default {
}
},
onLxmfMessageCreated(lxmfMessage) {
+ // only add if it's for the current conversation
+ if (lxmfMessage.destination_hash !== this.selectedPeer?.destination_hash) {
+ return;
+ }
+
// add new outbound lxmf message from server
- // todo check if received message is for this conversation
if (!this.isLxmfMessageInUi(lxmfMessage.hash)) {
this.chatItems.push({
type: "lxmf_message",
@@ -1166,7 +1217,6 @@ export default {
(chatItem) => chatItem.lxmf_message?.hash === lxmfMessageHash
);
if (chatItemIndex === -1) {
- console.log("did not find existing chat item index for lxmf message hash: " + lxmfMessage.hash);
return;
}
@@ -1579,6 +1629,11 @@ export default {
// build fields
const fields = {};
+ // add telemetry if present
+ if (this.newMessageTelemetry) {
+ fields["telemetry"] = this.newMessageTelemetry;
+ }
+
// add file attachments
var fileAttachmentsTotalSize = 0;
if (this.newMessageFiles.length > 0) {
@@ -1661,6 +1716,7 @@ export default {
this.newMessageImage = null;
this.newMessageImageUrl = null;
this.newMessageAudio = null;
+ this.newMessageTelemetry = null;
this.newMessageFiles = [];
this.clearFileInput();
} catch (e) {
@@ -1730,6 +1786,73 @@ export default {
console.log(e);
}
},
+ async shareLocation() {
+ try {
+ if (!navigator.geolocation) {
+ DialogUtils.alert("Geolocation is not supported by your browser");
+ return;
+ }
+
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ this.newMessageTelemetry = {
+ latitude: position.coords.latitude,
+ longitude: position.coords.longitude,
+ altitude: position.coords.altitude || 0,
+ speed: (position.coords.speed || 0) * 3.6, // m/s to km/h to match Sideband
+ bearing: position.coords.heading || 0,
+ accuracy: position.coords.accuracy || 0,
+ last_update: Math.floor(Date.now() / 1000),
+ };
+ this.sendMessage();
+ },
+ (error) => {
+ DialogUtils.alert(`Failed to get location: ${error.message}`);
+ },
+ {
+ enableHighAccuracy: true,
+ timeout: 5000,
+ maximumAge: 0,
+ }
+ );
+ } catch (e) {
+ console.log(e);
+ }
+ },
+ async requestLocation() {
+ try {
+ if (!this.selectedPeer) return;
+
+ // Send a telemetry request command
+ await window.axios.post(`/api/v1/lxmf-messages/send`, {
+ lxmf_message: {
+ destination_hash: this.selectedPeer.destination_hash,
+ content: "",
+ fields: {
+ commands: [
+ { "0x01": Math.floor(Date.now() / 1000) }, // Sideband TELEMETRY_REQUEST
+ ],
+ },
+ },
+ });
+
+ ToastUtils.success("Location request sent");
+ } catch (e) {
+ console.log(e);
+ ToastUtils.error("Failed to send location request");
+ }
+ },
+ viewLocationOnMap(location) {
+ // navigate to map and center on location
+ this.$router.push({
+ name: "map",
+ query: {
+ lat: location.latitude,
+ lon: location.longitude,
+ zoom: 15,
+ },
+ });
+ },
formatTimeAgo: function (datetimeString) {
return Utils.formatTimeAgo(datetimeString);
},
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────